import React from 'react';
import { connect } from 'dva';
import { List, WhiteSpace } from 'antd-mobile';
import Content from '../../components/layout/content';
import ChildWrap from '../../components/layout/childWrap';
import Center from './center';
import Feedback from './feedback';
import Setting from './setting';
import styles from './index.less';

const Item = List.Item;
const Brief = Item.Brief;

function MyOverview({infor, right, dispatch}) {
    let rightContent = <Center infor={infor}/>;

    function changeRight(key) {
        dispatch({
            type: 'user/changeRight',
            payload: key,
        });
    }

    switch (right) {
    case 'feedback':
        rightContent = <Feedback />;
        break;
    case 'setting':
        rightContent = <Setting />;
        break;
    default:
        rightContent = <Center infor={infor}/>;
        break;
    }

    const left = (<ChildWrap
        content="首页"
        padding="30px 0px 0px 0px"
    >
        <List>
            <Item
                thumb={require('../../assets/img/defaultAvatar.png')}
                arrow="horizontal"
                onClick={changeRight.bind(null, 'center')}
                multipleLine
                className={styles.avatar}
            >
                {infor.name}
                <Brief>{infor.department} {infor.role}</Brief>
            </Item>
        </List>

        <WhiteSpace size="lg"/>

        <List>
            <Item
                arrow="horizontal"
            >
                病历收藏
            </Item>
        </List>
        <List>
            <Item
                arrow="horizontal"
            >
                会诊记录
            </Item>
        </List>
        <List>
            <Item
                arrow="horizontal"
            >
                我的预约
            </Item>
        </List>

        <WhiteSpace size="lg"/>

        <List>
            <Item
                arrow="horizontal"
                onClick={changeRight.bind(null, 'feedback')}
            >
                意见反馈
            </Item>
        </List>
        <List>
            <Item
                arrow="horizontal"
                onClick={changeRight.bind(null, 'setting')}
            >
                设置
            </Item>
        </List>
    </ChildWrap>);
    return (
        <Content
            left={left}
            right={rightContent}
        />
    );
}

function mapStateToProps({ user }) {
    return user;
}

export default connect(mapStateToProps)(MyOverview);
